<template>
  <MainLayout>
    <div class="dashboard-container">
      <!-- 统计卡片区域 -->
      <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-label">总服务器数</div>
              <div class="stat-value">12</div>
              <div class="stat-trend">
                <span class="trend-up"><ArrowUp /> 2 台 (本周)</span>
              </div>
            </div>
            <div class="stat-icon"><Monitor /></div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card running">
            <div class="stat-content">
              <div class="stat-label">运行中</div>
              <div class="stat-value">8</div>
              <div class="stat-trend">
                <span class="trend-up"><ArrowUp /> 1 台 (今天)</span>
              </div>
            </div>
            <div class="stat-icon"><Check /></div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card stopped">
            <div class="stat-content">
              <div class="stat-label">已停止</div>
              <div class="stat-value">3</div>
              <div class="stat-trend">
                <span class="trend-down"><ArrowDown /> 1 台 (今天)</span>
              </div>
            </div>
            <div class="stat-icon"><CircleClose /></div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card maintenance">
            <div class="stat-content">
              <div class="stat-label">维护中</div>
              <div class="stat-value">1</div>
              <div class="stat-trend">
                <span class="trend-equal"><Minus /> 无变化</span>
              </div>
            </div>
            <div class="stat-icon"><Tools /></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 服务器列表区域 -->
      <el-card class="server-list-card">
        <div class="card-header">
          <h2>服务器状态</h2>
          <el-button type="primary" size="small" class="add-server-btn">
            <Plus /> 添加服务器
          </el-button>
        </div>
        <el-table :data="servers" stripe class="server-table">
          <el-table-column prop="name" label="服务器名称" width="180" />
          <el-table-column prop="ip" label="IP地址" width="140" />
          <el-table-column prop="port" label="端口" width="80" align="center" />
          <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="players" label="在线玩家" width="100" align="center" />
          <el-table-column prop="uptime" label="运行时间" width="140" align="center" />
          <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
              <el-button
                :icon="scope.row.status === '运行中' ? Minus : CaretRight"
                :disabled="scope.row.status === '维护中'"
                :type="scope.row.status === '运行中' ? 'warning' : 'success'"
                size="small"
                @click="handleStatusChange(scope.row)"
              />
              <el-button icon="Settings" size="small" class="ml-2" />
              <el-button icon="More" size="small" class="ml-2" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </MainLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MainLayout from '@/components/layout/MainLayout.vue';
import { Monitor, Check, CircleClose, Tools, ArrowUp, ArrowDown, Minus, Plus, CaretRight, Settings, More } from '@element-plus/icons-vue';

// 服务器状态类型定义
interface Server {
  id: number;
  name: string;
  ip: string;
  port: number;
  status: '运行中' | '已停止' | '维护中';
  players: number;
  maxPlayers: number;
  uptime: string;
}

// 模拟服务器数据
const servers = ref<Server[]>([
  {
    id: 1,
    name: '帕鲁官方服务器 #1',
    ip: '192.168.1.101',
    port: 8211,
    status: '运行中',
    players: 12,
    maxPlayers: 20,
    uptime: '2天8小时'
  },
  {
    id: 2,
    name: '帕鲁官方服务器 #2',
    ip: '192.168.1.102',
    port: 8211,
    status: '运行中',
    players: 8,
    maxPlayers: 20,
    uptime: '1天12小时'
  },
  {
    id: 3,
    name: '测试服务器',
    ip: '192.168.1.103',
    port: 8211,
    status: '已停止',
    players: 0,
    maxPlayers: 10,
    uptime: '0'
  },
  {
    id: 4,
    name: '开发环境服务器',
    ip: '192.168.1.104',
    port: 8211,
    status: '维护中',
    players: 0,
    maxPlayers: 5,
    uptime: '0'
  }
]);

// 根据状态获取标签类型
const getStatusTagType = (status: string): 'success' | 'danger' | 'warning' => {
  switch (status) {
    case '运行中':
      return 'success';
    case '已停止':
      return 'danger';
    case '维护中':
      return 'warning';
    default:
      return 'default';
  }
};

// 处理服务器状态变更
const handleStatusChange = (server: Server) => {
  // 这里只是模拟状态切换，实际项目中应该调用API
  const newStatus = server.status === '运行中' ? '已停止' : '运行中';
  const updatedServers = servers.value.map(s => 
    s.id === server.id ? { ...s, status: newStatus, uptime: newStatus === '运行中' ? '刚刚启动' : '0' } : s
  );
  servers.value = updatedServers;
};
</script>

<style scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  height: 140px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stat-content {
  padding: 15px;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #1e293b;
}

.stat-trend {
  font-size: 12px;
  margin-top: 5px;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.trend-equal {
  color: #64748b;
}

.stat-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(59, 130, 246, 0.1);
  font-size: 32px;
}

.stat-card.running .stat-icon {
  color: rgba(16, 185, 129, 0.1);
}

.stat-card.stopped .stat-icon {
  color: rgba(239, 68, 68, 0.1);
}

.stat-card.maintenance .stat-icon {
  color: rgba(245, 158, 11, 0.1);
}

.server-list-card {
  height: calc(100% - 160px);
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.add-server-btn {
  display: flex;
  align-items: center;
}

.server-table {
  flex: 1;
}

.el-table .el-button {
  padding: 5px;
}

.ml-2 {
  margin-left: 8px;
}
</style>